/**
 * Create: Lengxx
 * Name: 登录界面
 * Time: 2021/10/13
*/
<template>
	<div class="login">
		<div class="login-title">
			System
		</div>
		<el-form
		:model="formData"
		:rules="rules"
		label-width="80px">
			<el-form-item
			label="用户名："
			prop="username">
				<el-input v-model="formData.username"
				placeholder="请输入用户名"></el-input>
			</el-form-item>
			<el-form-item
			label="密码："
			prop="password">
				<el-input v-model="formData.password"
				placeholder="请输入密码"></el-input>
			</el-form-item>
		</el-form>
		<div class="login-btn">
			<el-button class="button-login">登录</el-button>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
	name: 'Login',
	setup() {
		const formData = ref({
			userName: '',
			password: ''
		});
		const rules = ref({
			username: [
				{required: true,message:'用户名不能为空',trigger: 'blur'}
			],
			password: [
				{required: true,message: '密码不能为空',trigger: 'blur'}
			]
		})

		return {
			formData,
			rules
		}
	}
})

</script>